<template>
	<view class="cooperation" :style="{height:height+'px'}">
		<view style="background: linear-gradient(#dcdcdc,#f7f7f7,#ffffff)">
		<view style="padding:30upx;">
			<view class="card-wrap">
					<image src="../../static/img/card.png"
						   style="width: 57%;height: calc(55vw + 1px);position: absolute;border-top-left-radius: 20upx;border-bottom-left-radius: 20upx"/>
					<image :src="data.trueAvatar"
						   style="margin-left:47%;width:53%;height: 55vw;" />

				<view style="position: absolute;left: 60upx;top:64upx">
					<image src="../../static/img/logo.png" class="logo"/>
					<view v-if="data.trueName">
						<view class="name">{{data.trueName}}</view>
						<view class="duty">{{data.jobPosition}}</view>
						<view style="margin-top: 10upx">
							<text class="iconfont" style="color:#0ABC64;font-size:20upx;">&#xe659;</text>
							<span style="margin-left:4upx;font-size: 20upx;color:#AAAAAA">微信</span>
							<view style="font-size: 30upx;color:#393939">{{data.wxAccount}}</view>
						</view>
						<view>
							<text class="iconfont" style="color:#0ABC64;font-size:20upx;">&#xe6dd;</text>
							<span style="margin-left:4upx;font-size: 20upx;color:#AAAAAA">微信二维码</span>
							<view style="font-size: 30upx;color:#393939">点击查看</view>
						</view>
					</view>
				</view>
			</view>
		</view>
<!--			<view class="button-wrap">-->
<!--				<button type="primary" open-type="share" class="button" v-if="data.trueName">-->
<!--					<text class="iconfont" style="margin-right:10upx;font-size:32upx;color: white;">-->
<!--						&#xe921;</text>-->
<!--					转发-->
<!--				</button>-->
<!--				<button type="primary" class="button" v-else @click="noShare">-->
<!--					<text class="iconfont" style="margin-right:10upx;font-size:32upx;color: white;" >-->
<!--						&#xe921;</text>-->
<!--					转发-->
<!--				</button>-->
<!--				<button @click="goUrl" type="primary" class="button" style="background: #E0FBED;color: #0ABC64">-->
<!--					<text class="iconfont" style="margin-right:10upx;font-size:32upx;color: #0ABC64;">-->
<!--						&#xe61a;</text>-->
<!--					编辑-->
<!--				</button>-->
<!--			</view>-->
<!--			<view style="display: flex;" v-if="data.trueName">-->
<!--				<view>-->
<!--					<image v-for="item in [1,1,1,1,1,1]" class="nav-head" src="http://n.sinaimg.cn/news/transform/700/w1000h500/20190722/e14c-iaantfi6168637.jpg"/>-->
<!--				</view>-->
<!--				<view class="browse">209人浏览</view>-->
<!--			</view>-->
		</view>
		<view class="bottom" v-if="data.trueName">
			<view style="display: flex">
				<view class="dot"/>
				<view style="font-size: 32upx;line-height: 40upx">个人简介</view>
			</view>
			<view style="margin: 20upx 0;display: flex" v-if="data.tempFilePath">
				<image style="width: 64upx;height: 64upx;margin: 0" class="nav-head" :src="data.trueAvatar"/>
				<view @click="audioPlay" class="nav-back" style="width: 100px;height:60upx;margin-top: 2upx">
					<view class="nav-head" style="margin:0 30upx;border-radius: 0">
						{{duration}}"
					</view>
					<view>
						<text class="iconfont" :style="{fontSize:'60rpx',color:flag?'#0ABC64':'#7f7f7f'}">
							&#xe601;</text>
					</view>
				</view>
			</view>
			<text class="brief">
				{{data.description}}
			</text>
			<button type="primary" class="submit" @click="submit">
				提交
			</button>
		</view>
	</view>
</template>

<script>
	import API from '../../common/api.js';

	export default {
		components:{
		},
		data() {
			return {
				height: uni.getSystemInfoSync().windowHeight,
				backgroundAudioManager:null,
				flag:false,
				data:{},
				duration:0,
			}
		},
		onLoad(options){
			console.log(options,77)
			this.data={trueName: "1", jobPosition: "1", wxAccount: "123",
				tempFilePath: "http://tmp/wxd3fbe69045d2ba3c.o6zAJs6PQCjWatrW11EKbzCIscDE.gxi" +
						"SgzsFDOQk2e5d3b083d2e3cc6884b06e0373e7fdd.durationTime",
				trueAvatar: "https://knowledge.nervenets.com/upload/1564963200/1564990231476.jpg",
				wxQrCodeUrl: "https://knowledge.nervenets.com/upload/1564963200/1564989905658.jpg", description: "dasda",
			}
			this.audio()
			if(options.trueName){
				this.data=options
				this.audio()

			}
		},
		methods:{
			getData(){
				API.userMy({
					token:uni.getStorageSync('token')}).then(res=>{
					console.log(res,110000)
					if(res.status==200){
						this.data=res.data.extra
					}else{
						uni.showModal({
							title: '提示',
							content: '请求失败！',
							showCancel: false,
						});
					}
				})
			},
			submit(){
				uni.showLoading()
				if(uni.getStorageSync('audio')){
					this.data.introAudioUrl=this.data.tempFilePath
					this.data.token=uni.getStorageSync('token')
					API.userUpdateUserInfo(this.data).then(r=>{
						if(r.status==200){
							uni.showToast({
								title: '提交成功',
								icon:'success',
								duration:2000
							})
							uni.hideLoading()
							uni.setStorage({
								key: 'preview',
								data: 1,
								success: function success() {
									uni.navigateBack({delta: 2});
								} });
						}else{
							uni.showToast({
								title: '提交失败',
								icon:'none',
								duration:2000
							})
							uni.hideLoading()
						}
					})
					return
				}
				uni.uploadFile({
					url: 'https://knowledge.nervenets.com/api/v1/file/upload',//这是你自己后台的连接
					filePath: this.data.tempFilePath,
					name:"userfile",//后台要绑定的名称
					header: {
						"Content-Type": "multipart/form-data"
					},
					success:(res)=>{
						console.log(res,77777)
						this.data.introAudioUrl=JSON.parse(res.data).data
						this.data.token=uni.getStorageSync('token')
						API.userUpdateUserInfo(this.data).then(r=>{
							if(r.status==200){
								uni.showToast({
									title: '提交成功',
									icon:'success',
									duration:2000
								})
								uni.hideLoading()
								uni.setStorage({
									key: 'preview',
									data: 1,
									success: function success() {
										uni.navigateBack({delta: 2});
									} });
							}else{
								uni.showToast({
									title: '提交失败',
									icon:'none',
									duration:2000
								})
								uni.hideLoading()
							}
						})

					},
					fail: (res)=>{
						uni.showToast({
							title: '录音文件保存失败',
							icon:'error',
							duration:2000
						})
						uni.hideLoading()
					}
				})
			},
			goUrl(){
				uni.navigateTo({
					url: '../index/editCard'
				});
			},
			audio(){
				this.backgroundAudioManager = uni.getBackgroundAudioManager()
				this.backgroundAudioManager.title = '语音介绍'
				this.backgroundAudioManager.epname = '语音介绍'
				this.backgroundAudioManager.singer = '微信用户'
				this.backgroundAudioManager.src = this.data.tempFilePath
						// 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
				// this.backgroundAudioManager.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'
				this.backgroundAudioManager.onCanplay(res=>{
					this.backgroundAudioManager.pause()
					this.backgroundAudioManager.seek(0)
					setTimeout(() => {
						this.duration=parseInt(this.backgroundAudioManager.duration+1)
						console.log(this.duration,8888)
					}, 100)
				})
				this.backgroundAudioManager.onEnded(res=>{
					this.backgroundAudioManager.src = this.data.tempFilePath
							'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
					this.backgroundAudioManager.pause()
					this.flag=false
				})
			},
			audioPlay() {
				if(this.flag){
					this.backgroundAudioManager.pause()
					this.backgroundAudioManager.seek(0)
				}else{
					this.backgroundAudioManager.play()
				}
				this.flag=!this.flag
			},
		}
	}
</script>

<style>
	.cooperation{
		background: #F9F9F9;
	}
	.card-wrap{
		border-radius: 16upx;
		color: rgba(16, 16, 16, 1);
		box-shadow: 0px 4px 4px 4px rgba(102, 102, 102, 0.2);
		font-family: -apple-system;
		overflow: hidden;
		display: flex;
	}
	.logo{
		width: 170upx;
		height: 44upx;
	}
	.name{
		color: rgba(79, 79, 79, 1);
		font-size: 38upx;
		margin-top: 22upx;
		font-family: PingFangSC-regular;
	}
	.duty{
		color: rgba(100, 100, 100, 1);
		font-size: 24upx;
		font-family: PingFangSC-regular;
	}
	.button-wrap{
		display: flex;
		justify-content: space-between;
		margin: 40upx 0;
	}
	.button{
		width: 45%;
		height: 84upx;
		border-radius: 242upx;
		background-color: rgba(10, 188, 100, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 32upx;
		font-family: -apple-system;
		border: 1px solid rgba(10, 188, 100, 1);
	}
	.submit{
		width: 90%;
		margin:100upx 0 0 5%;
		height: 84upx;
		border-radius: 242upx;
		background-color: rgba(10, 188, 100, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 32upx;
		font-family: -apple-system;
	}
	.browse{
		color: rgba(183, 183, 183, 1);
		font-size: 22upx;
		display: inline-block;
		line-height: 60upx;
	}
	.bottom{
		/*margin-top: 40upx;*/
		background: white;
		padding: 40upx 30upx;
	}
	.dot{
		width: 12upx;
		height: 12upx;
		border-radius: 12upx;
		background: #F5DB16;
		margin-right: 20upx;
		margin-top: 16upx;
	}
	.brief{
		color: rgba(68, 68, 68, 1);
		font-size: 28upx;
	}
</style>
